<template>
    <div class="table-body">
        <a-table
            :pagination="false"
            :data-source="dataSource"
            :scroll="{
                y: 600,
                x: !columns ? 3000 : columns.length * 100
            }"
            :loading="tableLoading"
            bordered
        >
            <!-- 表头模板 -->
            <template v-for="item in columns">
                <!-- 不是日期表格头内容 -->
                <a-table-column
                    v-if="item.date === null"
                    :key="item.dataIndex"
                    :fixed="item.fixed"
                    :title="item.title"
                    :data-index="item.dataIndex"
                    :width="item.width"
                    :custom-render="item.customRender"
                >
                    <template #default="{ text, record }">
                        <template v-if="item.dataIndex === 'rate'">
                            <a-progress :percent="Number(record.rate)" size="small" />
                        </template>
                        <template v-else-if="item.dataIndex === 'operation'">
                            <setting-outlined theme="filled" @click="handleRow(record)" />
                        </template>
                        <template v-else-if="item.dataIndex === 'productName'">
                            <span class="product-name" :title="text">{{ text }} </span>
                        </template>
                        <template v-else>
                            {{ text }}
                        </template>
                    </template>
                </a-table-column>
                <!-- 日期表格头内容 -->
                <a-table-column
                    v-else
                    :key="item.dataIndex"
                    :title="item.title"
                    icon="plus"
                    :data-index="item.dataIndex"
                >
                    <template #default="{ text, record }">
                        <template v-if="text">
                            <div v-if="text.status" :class="[item.date === today ? 'today' : '', text.status]">
                                <a-input-number
                                    v-if="text.editValue"
                                    size="small"
                                    class="inputEditValue"
                                    v-model:value="text.count"
                                    @blur="handleChange(record.key, item.dataIndex, text.text)"
                                />

                                <em v-else @click="edit(record.key, item.dataIndex, text.count)">
                                    {{ text.count }}
                                    <check-circle-outlined v-if="text.edit" />
                                </em>
                            </div>
                            <div v-else :class="item.date === today ? 'today' : ''">{{ text.count }}</div>
                        </template>
                    </template>
                </a-table-column>
            </template>
            <!-- 内容模板-->
        </a-table>
    </div>
</template>

<script>
    import { defineComponent, reactive, toRefs, watch } from 'vue'
    import moment from 'moment'

    export default defineComponent({
        name: 'TableGantt',
        props: {
            tableGanttData: {
                type: Object
            },
            tableLoading: {
                type: Boolean,
                default: false
            }
        },
        setup(props, { emit }) {
            const state = reactive({
                today: moment().format('YYYY-MM-DD'),
                columns: [],
                columnsWidth: ['100', '100', '80', '240', '100', '50'],
                dataSource: []
            })

            watch(
                () => props.tableGanttData,
                newValue => {
                    state.columns = tableColumnsMerge(newValue.columns)
                    state.dataSource = resetDataList(newValue.tableDataList)
                },
                { immediate: true }
            )

            // 表头 点击事件方法
            function handleTitle(data) {
                emit('handleTitle', data)
            }

            // 行操作事件方法
            function handleRow(data) {
                emit('handleRow', data)
            }

            function handleChange(key, time, value) {
                const newData = [...state.dataSource]
                const target = newData.filter(item => key === item.key)
                if (target[0]) {
                    delete target[0][`${time}`].editValue
                    target[0][`${time}`].edit = true
                    // 夫组件的按钮状态变更
                    emit('btnVisible', true)
                    state.dataSource = newData
                }
            }

            function edit(key, time) {
                const newData = [...state.dataSource]
                const target = newData.filter(item => key === item.key)
                if (target[0]) {
                    target[0][`${time}`].editValue = true
                    state.dataSource = newData
                }
            }

            // 表格内容合并方法处理器
            function tableColumnsMerge(data) {
                data?.map((item, index) => {
                    if (item.date && item.date === state.today) {
                        item.title = '今天'
                    }
                    // 固定宽度赋值
                    if (state.columnsWidth.length > index) {
                        item.width = Number(state.columnsWidth[index])
                        item.ellipsis = true
                    } else {
                        delete item.fixed
                        delete item.width
                    }
                    // 合并单元格
                    // if (item.merge) {
                    //   item['customCell'] = data => {
                    //     const rowObj = row.lineList ? row.lineList[0] : []
                    //     const obj = {
                    //       children: '<a-tag color="red">{rowObj.name}</a-tag>',
                    //       attrs: {}
                    //     }
                    //     if (rowObj.parent && currentIndex === Number(rowObj.index) - 1) {
                    //       obj.attrs.rowSpan = rowObj.row
                    //     }
                    //     if (!rowObj.parent && Number(rowObj.index)) {
                    //       obj.attrs.colSpan = 0
                    //     }
                    //     return obj
                    //   }
                    // }
                })
                return data
            }

            // 表格数据结构
            function resetDataList(data) {
                data?.map(item => {
                    //  数据重构
                    if (item.dateList !== null) {
                        const _dateList = []
                        item.dateList.map(row => {
                            _dateList.push(row.date)
                            _dateList[row.date] = {
                                name: row.plannedOrderNo,
                                status: row.status,
                                count: row.count
                            }
                        })
                        delete item.dateList
                        item = Object.assign(item, _dateList)
                    } else {
                        delete item.dateList
                    }
                    // 判断当前时间
                    if (!item[state.today]) {
                        item[state.today] = {}
                    }
                })
                return data
            }

            return {
                ...toRefs(state),
                handleChange,
                handleRow,
                handleTitle,
                edit
            }
        }
    })
</script>

<style lang="less" scoped>
    .product-name {
        width: 230px;
        display: block;
    }

    .table-body {
        height: inherit;

        .today:before {
            content: '';
            position: absolute;
            height: 110%;
            width: 2px;
            right: -1px;
            top: -2px;
            background: #f00;
        }

        .inputEditValue {
            margin-top: 3px;
            width: 95%;
        }

        // tag 的特有样式
        .complete,
        .conduct,
        .rework,
        .prepare {
            background: #52c41a;
            color: #ffffff;

            em {
                display: block;
            }
        }

        .conduct {
            background: #b7eb8f;
            color: #333;
        }

        .rework {
            background: #da583f;
        }

        .prepare {
            background: #ffe58f;
            color: #333;
        }

        ::v-deep .ant-progress-inner {
            background: #fff;
            border: 1px solid #94cfff;
        }

        ::v-deep .ant-table-thead > tr > th {
            background: #0070cc;
            color: #fff;
            padding-left: 5px;
            line-height: 30px;
            font-size: 12px;
            text-align: center;
        }

        ::v-deep .ant-table-cell {
            min-width: 120px;
        }
        ::v-deep .ant-table-tbody > tr > td {
            padding: 1px;
            line-height: 30px;
            font-size: 12px;
            text-align: center;
            position: relative;
        }

        ::v-deep tr:nth-of-type(even) {
            background: #e7e7e70f;
        }

        ::v-deep .ant-table-fixed-left .ant-table-fixed {
            background: #fdfeff;
        }
    }

    /deep/ .ant-table-cell {
        white-space: nowrap;
    }
</style>
